<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="never" style="margin-bottom:15px;">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
      </div>

      <div style="margin-top: 15px">
        <el-form :inline="true" :model="listQuery">
          <el-form-item label="订单编号">
            <el-input style="width: 203px" v-model="listQuery.orderSn" placeholder="订单编号"></el-input>
          </el-form-item>
          <el-form-item label="店铺名称">
            <el-input style="width: 203px" v-model="listQuery.shopName" placeholder="店铺名称"></el-input>
          </el-form-item>
          <el-form-item label="收货人姓名">
            <el-input style="width: 203px" v-model="listQuery.receiveName" placeholder="收货人姓名"></el-input>
          </el-form-item>
          <el-form-item label="订单类型">
            <el-select v-model="listQuery.orderType" placeholder="全部" clearable>
              <el-option
                v-for="item in orderTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="支付时间">
            <el-col style="width: 202px;">
              <el-date-picker
                type="date"
                placeholder="开始时间"
                v-model="listQuery.payStartTime"
                @change="handlePayStartTime"
                style="width: 100%;"
              ></el-date-picker>
            </el-col>
            <div class="time-line">-</div>
            <el-col style="width: 202px;">
              <el-date-picker
                type="date"
                placeholder="结束时间"
                v-model="listQuery.payEndTime"
                @change="handlePayEndTime"
                style="width: 100%;"
              ></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-col style="width: 202px;">
              <el-date-picker
                type="date"
                placeholder="开始时间"
                v-model="listQuery.createStartTime"
                @change="handleCreateStartTime"
                style="width: 100%;"
              ></el-date-picker>
            </el-col>
            <div class="time-line">-</div>
            <el-col style="width: 202px;">
              <el-date-picker
                type="date"
                placeholder="结束时间"
                v-model="listQuery.createEndTime"
                @change="handleCreateEndTime"
                style="width: 100%;"
              ></el-date-picker>
            </el-col>
          </el-form-item>
          <el-button @click="handleSearchList()" type="primary">查询</el-button>
          <el-button type="warning" @click="handleResetSearch()">清空</el-button>
        </el-form>
      </div>
    </el-card>

    <div class="operation-crumb clearfix">
		<el-radio-group v-model="listQuery.orderStatus">
		  <el-radio-button label="all">全部</el-radio-button>
		  <el-radio-button label="on">在售中</el-radio-button>
		  <el-radio-button label="off">已下架</el-radio-button>
		  <el-radio-button label="empty">已售罄</el-radio-button>
		</el-radio-group>

    <el-button type="primary">导出EXCEL</el-button>

	</div>



    <div class="table-container">
      <el-table
        ref="userTable"
        :data="list"
        border
        tooltip-effect="dark"
        style="width: 100%"
        v-loading="listLoading"
        :header-cell-class-name="tableHeaderClassName"
        :cell-class-name="tableCellClassName"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column prop="id" label="序号" width="120" align="center"></el-table-column>
        <el-table-column prop="orderSn" label="订单编号" width="120" align="center"></el-table-column>
        <el-table-column label="创建时间" width="180" align="center">
          <template slot-scope="scope">{{ scope.row.createTime|formatUnixToDate }}</template>
        </el-table-column>
        <el-table-column label="支付时间" width="180" align="center">
          <template slot-scope="scope">{{ scope.row.paymentTime|formatUnixToDate }}</template>
        </el-table-column>

        <el-table-column label="商品信息" align="center" width="300">
          <template slot-scope="scope">
            <img style="height: 80px;float:left;" :src="scope.row.goods[0].img" />
            ID:{{ scope.row.goods[0].id}}<br/>
            {{ scope.row.goods[0].goodsName}}<br/>
            货号:{{ scope.row.goods[0].goodsSn}}
          </template>
        </el-table-column>

        <el-table-column prop="shopName" label="店铺名称" width="180" align="center"></el-table-column>
        <el-table-column label="收货人信息" align="center" width="250">
          <template slot-scope="scope">
            <p>{{ scope.row.receiveName}} {{ scope.row.receivePhone}}</p>
            <p>{{ scope.row.address}}</p>
          </template>
        </el-table-column>
        <el-table-column label="红包抵扣" align="center" width="180">
          <template slot-scope="scope">
            ￥{{scope.row.bounsAmount}}
          </template>
        </el-table-column>

        <el-table-column label="优惠券" align="center" width="180">
          <template slot-scope="scope">
            ￥{{scope.row.couponAmount}}
          </template>
        </el-table-column>
        <el-table-column label="订单状态" width="120" align="center">
          <template slot-scope="scope">{{scope.row.status|formatStatusType}}</template>
        </el-table-column>
        <el-table-column label="订单类型" width="120" align="center">
          <template slot-scope="scope">{{scope.row.orderType|formatOrderType}}</template>
        </el-table-column>
        <el-table-column label="订单金额" align="center" width="180">
           <template slot-scope="scope">
            ￥{{scope.row.totalAmount}}
          </template>
        </el-table-column>
        <el-table-column label="实付金额" align="center" width="180">
          <template slot-scope="scope">
            ￥{{scope.row.payAmount}}
          </template>
        </el-table-column>

        <el-table-column label="操作" width="160" align="center">
          <template slot-scope="scope">
            <p>
              <el-button size="mini" @click="handleShowProduct(scope.$index, scope.row)">详情</el-button>
              <el-button size="mini" @click="handleUpdateProduct(scope.$index, scope.row)">审核</el-button>
            </p>
            <p>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </p>
            <p></p>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="listQuery.pageSize"
        :page-sizes="[5,10,15]"
        :current-page.sync="listQuery.pageNum"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import api from "@/http";
import { formatDate } from "@/utils/date";
const defaultQuery = {
  orderSn: null,
  shopName: null,
  payStartTime: null,
  payEndTime: null,
  orderType: null,
  createStartTime: null,
  createEndTime: null,
  receiveName: null,
  orderStatus:null,
  pageNum: 1,
  pageSize: 5
};
export default {
  name: "orderList",
  data() {
    return {
      total: null,
      listLoading: false,
      list: null,
      listQuery: Object.assign({}, defaultQuery),
      orderTypeOptions: [
        {
          value: 0,
          label: "普通订单"
        },
        {
          value: 1,
          label: "活动订单"
        }
      ],
      menuIndex: 0,
      multipleSelection: []
    };
  },
  created() {
    this.getList();
  },
  filters: {
    formatUnixToDate(time) {
      return formatDate(time, "yyyy-MM-dd hh:mm:ss");
    },
     formatOrderType(value) {
      switch (value) {
        case 0:
         return "普通订单";
          break;
        case 1:
          return "活动订单";
          break;
     }},

    formatStatusType(value) {
      switch (value) {
        case 0:
          return "已取消";
          break;
        case 1:
         return "已支付";
          break;
        case 2:
          return "待审核";
          break;
        case 3:
          return "待发货";
          break;
        case 4:
          return "待收货";
        break;
        case 5:
          return "已确认";
          break;
        default:
          return "已确认";
          break;
      }
    }
  },
  methods: {
    handleDelete(index, row) {
      this.$confirm("是否要进行删除操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let ids = [];
        ids.push(row.id);
        this.updateDeleteStatus(1, ids);
      });
    },
    updateDeleteStatus(deleteStatus, ids) {
      let params = { ids: ids, deleteStatus: deleteStatus };
      this.$api.regimental.updateDeleteStatus(params).then(response => {
        this.$message({
          message: "删除成功",
          type: "success",
          duration: 1000
        });
      });
      this.getList();
    },
    handleSearchList() {
      this.listQuery.pageNum = 1;
      this.getList();
    },
    handlePayStartTime() {},
    handlePayEndTime() {
      if (this.listQuery.payStartTime !== "") {
        if (this.listQuery.payEndTime < this.listQuery.payStartTime) {
          this.listQuery.payEndTime = "";

          this.$message({
            message: "结束时间不能小于开始时间！",
            type: "error",
            center: true
          });
        }
      }
    },
    handleCreateStartTime() {},
    handleCreateEndTime() {
      if (this.listQuery.createStartTime !== "") {
        if (this.listQuery.createEndTime < this.listQuery.createStartTime) {
          this.listQuery.createEndTime = "";

          this.$message({
            message: "结束时间不能小于开始时间！",
            type: "error",
            center: true
          });
        }
      }
    },
    getList() {
      this.listLoading = true;
      this.$api.order.fetchList(this.listQuery).then(response => {
        this.listLoading = false;
        this.list = response.data.list;
        this.total = response.data.total;
      });
    },

    handleResetSearch() {
      this.listQuery = Object.assign({}, defaultQuery);
    },
    // 表格背景色
    tableHeaderClassName({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "header-bg";
      }

      return "";
    },

    // 单元格内容居中
    tableCellClassName({ row, column, rowIndex, columnIndex }) {
      return "cell-center";
    },

    // 全选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    handleSizeChange(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    }
  }
};
</script>

